$(function(){
	viewTop10Film();
	$('#viewTopx').click(function(){
		var text = $(this).text();
		if(text == 'View Top5 Hot Categories') {
			viewTop5Category();
			$(this).text('View Top10 Hot Films');
		}else if(text == 'View Top10 Hot Films'){
			viewTop10Film();
			$(this).text('View Top5 Hot Categories');
		}
	});
});

function viewTop10Film(){
	$.get('getTop10f', function(result){
		$('#chartContainer').CanvasJSChart({
			title: {
                text: "Top 10 Films",
                fontFamily: "Verdana",
                fontColor: "Peru",
                fontSize: 28

            },
            animationEnabled: true,
            axisY: {
                tickThickness: 0,
                lineThickness: 0,
                valueFormatString: " ",
                gridThickness: 0                    
            },
            axisX: {
                tickThickness: 0,
                lineThickness: 0,
                labelFontSize: 18,
                labelFontColor: "Peru"

            },
            data: [
            {
                indexLabelFontSize: 15,
                toolTipContent: null,

                indexLabelPlacement: "inside",
                indexLabelFontColor: "black",
                indexLabelFontWeight: 600,
                indexLabelFontFamily: "Verdana",
                color: "#62C9C3",
                type: "bar",
                dataPoints: result
            }
            ]
		});
	});
}

function viewTop5Category(){
	$.get('getTop5c', function(result){
		$('#chartContainer').CanvasJSChart({
			title: {
                text: "Top 5 Categories",
                fontFamily: "Verdana",
                fontColor: "Peru",
                fontSize: 28

            },
            animationEnabled: true,
            axisY: {
                tickThickness: 0,
                lineThickness: 0,
                valueFormatString: " ",
                gridThickness: 0                    
            },
            axisX: {
                tickThickness: 0,
                lineThickness: 0,
                labelFontSize: 18,
                labelFontColor: "Peru"

            },
            data: [
            {
                indexLabelFontSize: 26,
                toolTipContent: null,

                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                indexLabelFontWeight: 600,
                indexLabelFontFamily: "Verdana",
                color: "#62C9C3",
                type: "bar",
                dataPoints: result
            }
            ]
		});
	});
}